<template>
	<view>
		<view class="top">
			
		</view>
		
		<view class="bottom">

		<view class="body">
			<view class="choice">
				<view 
					class="tab-button" 
					:class="{ 'active': current === 0 }"
					@click="onClickItem({currentIndex: 0})"
				>
					<text class="tab-text">已上架</text>
				</view>
				<view 
					class="tab-button" 
					:class="{ 'active': current === 1 }"
					@click="onClickItem({currentIndex: 1})"
				>
					<text class="tab-text">未上架</text>
				</view>
			</view>
			
			
			<view class="content">
				<view v-if="current === 0" class="content-item">
					<view class="activity-card" @click="goToDetails">
						<view class="card-content">
							<view class="content-title">
								阳春三月游江南活动开始报名了
							</view>
							<view class="content-time">
								2023-03-10 11:09
							</view>
						</view>
						<view class="card-action">
							<button class="action-button">下架</button>
						</view>
					</view>
					
					<view class="activity-card">
						<view class="card-content">
							<view class="content-title">
								阳春三月游江南活动开始报名了
							</view>
							<view class="content-time">
								2023-03-10 11:09
							</view>
						</view>
						<view class="card-action">
							<button class="action-button">下架</button>
						</view>
					</view>
				</view>
				<view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
			</view>
		</view>
			
	<!-- 悬浮按钮 -->
	<!-- 新增公告+ -->
		</view>
		<button class="addactiviy-btn" @click="goToAddtivity">新增公告 +</button>
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: ['选项卡1', '选项卡2'],
				activeColor: '#007aff',
				styleType: 'button'
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			goToAddtivity(){
				uni.navigateTo({
					url:"/pages/activity/activitypublish/activitypublish"
				})
			},
			goToDetails(){
				uni.navigateTo({
					url:"/pages/activity/activityDetails/activityDetails"
				})
			}
			
		}
	}
</script>

<style scoped>
	.top{
		height: 25vh;
		background-color: #1f73f1;
	}
	.bottom{
		padding: 20rpx;
		min-height: 75vh;
		background-color: #f8f8f8;
	}
	.choice{
		display: flex;
		margin: 0 auto 30rpx auto;
		width: fit-content;
		border-radius: 40rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		
	}
	.tab-button {
		padding: 20rpx 50rpx;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
		min-width: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}
	
	.tab-button.active {
		background-color: #4285f4;
	}
	.tab-text {
		font-size: 28rpx;
		font-weight: 500;
		transition: color 0.3s ease;
	}
	
	.tab-button.active .tab-text {
		color: #ffffff;
		font-weight: 600;
	}
	
	.tab-button.inactive .tab-text {
		color: #666666;
	}

	.content-text {
		font-size: 32rpx;
		color: #333;
	}
	.body {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 35rpx;
		transform: translateY(-300rpx);
	}
	.activity-card {
		background-color: transparent;
		padding: 32rpx 0;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2rpx solid #e9e9eb;
	}
	.content>:first-child{
		border-top: 4rpx solid #e9e9eb;
	}
	.card-content {
		flex: 1;
	}
	
	.content-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		line-height: 1.4;

	}
	
	.content-time {
		font-size: 24rpx;
		color: #999999;
		line-height: 1.2;
		margin-top: 32rpx;
	}
	
	.card-action {
		margin-left: 24rpx;
	}
	
	.action-button {
		background-color: #4285f4;
		color: #ffffff;
		border: none;
		border-radius: 50rpx;
		padding: 8rpx 60rpx;
		font-size: 28rpx;
		font-weight: 500;
		min-width: 180rpx;
		box-shadow: 0 2rpx 8rpx rgba(66, 133, 244, 0.3);
	}
	
	.action-button:active {
		background-color: #3367d6;
		transform: scale(0.98);
	}
	/* 底部新增公告按钮-悬浮 */
	.addactiviy-btn{
		/* 固定定位：使按钮脱离文档，固定在页面底部*/
		position: fixed;
		bottom: 120rpx;
		left: 30%;
		
		/* 样式美化 */
		background-color: #4073ff;
		color: #f1f1f1;
		font-family: 宋体;
		font-weight: 700;
		border-radius: 20rpx;
		
	}
	.addactiviy-btn:hover{
		background-color: #1f73f1;
	}
	
	
	

</style>
